<template>
    <div class="Media">
        <!-- <div class="carttitlebox">
            <div class="bt">
                <span>网站管理</span>
            </div> 
        </div> -->
         <div class="title_bt">
            <div class="bt on" @click="add"><i class="el-icon-caret-bottom"></i>新建网站</div>
             <div class="search">
                <el-input v-model="searchinput" placeholder="请输入网站名称和域名"></el-input>
                <div class="button"><i class="el-icon-search"></i></div>
             </div>
        </div>
        <el-table :data="tableData" style="width: 100%" class="tablebox">
            <el-table-column prop="title1" label="网站域名"  >
                <template slot-scope="scope">
                    <div class="link">{{scope.row.title1}}</div>
                    <div class="link2"><span>ID:{{scope.row.title2}}</span>|<span>{{scope.row.title3}}</span></div>
                </template>
            </el-table-column>
            <el-table-column prop="title3" label="网站名称" ></el-table-column>
            <el-table-column prop="title4" label="已开通业务"  ></el-table-column>
            <el-table-column  label="状态" align="center"  width="100" >
                  <template slot-scope="{ row }">
                        <el-tag size='mini' :type="row.title5==1?'success': 'info'"> {{row.title5==1?'通过':'未过'}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="title6" align="center" sortable label="创建时间" width="150" ></el-table-column>
            <el-table-column class-name="status-col"  label="操作" width="220"  align="center"  fixed="right">
                <template slot-scope="{ row, $index }">
                    <kt-button icon="el-icon-edit" size='mini'  label="修改" perms="sys:adminlist:edit" type="primary" @click="handleUpdate(row,$index)"/>
                    <kt-button icon="el-icon-delete" size='mini' label="删除" perms="sys:adminlist:delete" type="danger" @click="handleDelete(row,$index)"/>
                    <!-- <kt-button icon="el-icon-s-goods" size='mini'  label="报告" perms="sys:adminlist:edit" type="warning"/> -->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="pageswarp"
            :background="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=pages
            :page-size="20"
            layout="total, prev, pager, next, jumper"
            :total="40">
        </el-pagination>
        <!-- 新建网站 -->
         <el-drawer
            :title="drawer_title"
            :visible.sync="drawer"
            :before-close="handleClose"
            custom-class="demo-drawer"
            ref="drawer"
             size="90%">
              <div class="demo-drawer__content">
                    <div class="demo-drawer__content_from">
                        <div class="from">
                            <el-form :model="userForm" :rules="rules" ref="userForm"  label-width="100px" >
                                <el-form-item label="网站域名：" prop="domain_name">
                                    <el-input v-model="userForm.domain_name"></el-input>
                                </el-form-item>
                                <el-form-item label="网站名称：" prop="name">
                                    <el-input v-model="userForm.name"></el-input>
                                </el-form-item>
                                 <el-form-item label="网站描述：" prop="des">
                                     <div class="textarea">
                                        <el-input type="textarea" :autosize='{minRows: 4,maxRows: 10}' v-model="userForm.des"  ></el-input> 
                                     </div>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="demo-drawer__footer">
                            <el-button @click="handleClose">取 消</el-button>
                            <el-button type="primary"  @click="submitForm('userForm')" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                        </div>
                    </div>
                </div>
         </el-drawer>
    </div>
</template>
<script>
import KtButton from "@/components/elbutton"
export default {
    name:'Media',
    data(){
        return{
            loading:false,
            pages:1,
            searchinput:'',  //顶部的搜索栏目
            drawer:false,
            drawer_title:'新建网站',
            userForm:{
                domain_name:'',
                name:'',
                des:'',
            },
              rules:{
                    domain_name: [
                        { required: true, message: '请输入网站域名', trigger: 'blur' }
                    ],
                     name: [
                        { required: true, message: '请输入网站名称', trigger: 'blur' }
                    ],
                     des: [
                        { required: true, message: '请输入网站描述', trigger: 'blur' }
                    ],
                    
                },
            tableData: [   //表格的数据
                 {
                    title1: '3dmgame.com',
                    title2: '1254810',
                    title3: '3DM游戏库',
                    title4: '网盟推广合作',
                    title5: 1,
                    title6: '2010-05-31 13:07',
                },
                 {
                    title1: '3dmgame.com',
                    title2: '1254810',
                    title3: '3DM游戏库',
                    title4: '网盟推广合作',
                    title5: 2,
                    title6: '2012-05-31 13:07',
                },
                 {
                    title1: '3dmgame.com',
                    title2: '1254810',
                    title3: '3DM游戏库',
                    title4: '网盟推广合作',
                    title5: 1,
                    title6: '2010-05-31 13:07',
                },
          ]
        }
    },
    created(){
        
    },
     components:{
        KtButton,
    },
    methods:{
         titlevalue(){  //默认显示头2条
            let arr=[];
            let that=this;
            that.barcartdata.data.slice(0,2).forEach((item)=>{arr.push(item.title);})
            return arr;
        },
        search(){
            console.log(this.selectvalue)
        },
         handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
         // 修改用户
        handleUpdate(item,index){
             this.drawer_title='修改网站'; 
            this.drawer=true; 
            this.userForm.domain_name=item.title1;
            this.userForm.name=item.title3;
            this.userForm.des="一句话的事";
            console.log(item,index);
        },
         // 删除用户
        handleDelete(item,index){
            this.$confirm('确定要删除网站信息吗？','确认删除',{customClass:'layeralterelbox'}) .then(()  => {
                    this.tableData.splice(index,1);
                }).catch(()  => {});
        },
        handleClose(){
               this.drawer=false;
            //  this.$confirm('确定要关闭吗','确认信息',{customClass:'layeralterelbox'}) .then(()  => {
                  
            //     }).catch(()  => {});
        },
        // 提交个人信息
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                        this.loading = true;
                        // 动画关闭需要一定的时间
                        setTimeout(() => {
                        this.loading = false;
                        }, 400);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        add(){
            this.drawer_title='新建网站'; 
            this.drawer=true; 
            this.userForm.domain_name='';
            this.userForm.name='';
            this.userForm.des="";
        }
    }
}
</script>